<template>
  <div id="photo-sphere-viewer-container"></div>
</template>

<script lang="ts">
  import { defineComponent, ref, onMounted, onUnmounted } from 'vue';
  import * as THREE from 'three';
  import { Viewer } from 'photo-sphere-viewer';
  import 'photo-sphere-viewer/dist/photo-sphere-viewer.css';
  export default defineComponent({
    // 传入单张全景图
    props: {
      fileId: {
        //图片文件ID，用于识别是否传入了文件未传入文件时不进行加载
        type: Number as PropType<number>,
      },
      photo: {
        //全景图图片完整url
        type: String as PropType<string>,
      },
      minFov: {
        type: Number as PropType<string>,
      },
      maxFov: {
        type: Number as PropType<string>,
      },
      height: {
        type: String as PropType<string>,
      },
      width: {
        type: String as PropType<string>,
      },
    },
    components: {},
    setup(props, { emit }) {
      console.log('PhotoPreview setup props', props);
      let viewer: Viewer | null;

      onMounted(() => {
        console.log('PhotoPreview onMounted props', props);
        if (props && props.fileId && props.fileId > 0x0 && props.photo) {
          //如果没有传入全景图图片不加载viewer：判断方法：要求传入的全景图图片文件ID必须正确
          console.log('PhotoPreview onMounted viewer', viewer);
          viewer = new Viewer({
            container: 'photo-sphere-viewer-container',
            size: {
              width: props.width ? props.width : '100vw',
              // width: props.width ? props.width : '100%',
              // height: props.height ? props.height : 'calc(100% - 200px)',
              height: props.height ? props.height : '100vh',
            },
            panorama: props.photo,
            minFov: props.minFov ? props.minFov : 20,
            maxFov: props.maxFov ? props.maxFov : 80,
            navbar: ['autorotate', 'fullscreen', 'zoom', 'move'],
          });
        }
      });

      onUnmounted(() => {
        console.log('PhotoPreview onUnmounted');
      });

      return {};
    },
  });
</script>
<style scoped>
  .psv-canvas-container {
    width: 100%;
    height: 100%;
  }
</style>
